<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .book-list {
            border: 1px solid;
            padding: 20px;
            display: inline-block;
            background: rgb(56, 131, 216);
            color: #fff;
        }
    </style>
    <script src="/js/vue.js"></script>
</head>
    <body>
        <div id="app">
           <!--kebab-case注册可以用kebab-case使用-->
           <people-list></people-list>

           <!--!--kebab-case注册不能用PascalCase使用---->
           <!--<PeopleList></PeopleList>-->

           <!--PascalCase注册可以用kebab-case使用-->
           <book-item1></book-item1>
           <!--PascalCase注册在DOM中不能PascalCase使用-->
           <!--<BookItem2></BookItem2>-->

           <book-list></book-list>
        </div>
    </body>
    <script type="text/x-template" id="people-list">
        <ul>
            <li>tom</li>
            <li>jerry</li>
            <li>kevin</li>
        </ul>
    </script>
    <script>
       Vue.component('people-list', {
        template:'#people-list'
       })

       Vue.component('BookItem1', {
        template:'<div>书名:《西游记》</div>'
       })

       Vue.component('BookItem2', {
        template:'<div>书名:《三国演义》</div>'
       })

       //在字符串模板中使用PascalCase
       Vue.component('BookList', {
        template:`<ul class="book-list">
            <li><BookItem1></BookItem1></li>
            <li><BookItem2></BookItem2></li>
            </ul>`
       })

       let vm = new Vue({
        el:'#app'
       })
    </script>
</html>